<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <el-input size="small" v-model="searchMap.name" placeholder="渠道名称"></el-input>
        <el-select v-model="searchMap.status" clearable placeholder="请选择状态">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button size="small" type="primary"  @click="handleAdd()"><i class="el-icon-plus"></i><span>新建渠道</span></el-button>
      </div>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData.list" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="序号" width="80" prop="id"></el-table-column>
        <el-table-column label="商家appid" width="140" prop="appid"></el-table-column>
        <el-table-column label="渠道名" width="200" prop="name"></el-table-column>
        <el-table-column label="分类" width="90" prop="type_txt"></el-table-column>
        <el-table-column label="联系人" width="120" prop="link_name"></el-table-column>
        <el-table-column label="联系电话" width="140" prop="phone"></el-table-column>
        <el-table-column label="可售产品标签" prop="tag_txt"></el-table-column>
        <!-- <el-table-column label="结算方式" prop="advertisersName"></el-table-column> -->
        <el-table-column label="余额" width="140" prop="amount"></el-table-column>
        <el-table-column label="状态" width="60">
          <template slot-scope="scope">
            <p v-if="scope.row.status==1">启用</p>
            <p v-else>禁用</p>
          </template>
        </el-table-column>
       <!-- <el-table-column label="结算方式" prop="detail"></el-table-column>
        <el-table-column label="订单量" prop="detail"></el-table-column>
        <el-table-column label="订单金额" prop="detail"></el-table-column>-->
        <el-table-column label="创建时间" prop="create_time" width="180"></el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope" style="caozuo">
            <router-link :to="{name:'channelEdit',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="link">编辑</router-link>
            -
            <router-link :to="{name:'goodsList',query:{mch_id:scope.row.id}}" @click.native="handleGoods(scope.row.id)" class="link">查看商品</router-link>
            -
            <router-link :to="{name:'orderList',query:{vendor_id:scope.row.id}}" @click.native="handleOrder(scope.row.id)" class="link">查看订单</router-link>
            -
            <router-link  :to="{name:'specialSet',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="link">特殊商品设置</router-link>
            -
            <router-link  :to="{name:'invoiceInformation',query:{id:scope.row.id,type:'merchant'}}" @click.native="handleEdit(scope.$index,scope.row)" class="link">发票信息维护</router-link>
            -
            <button v-if="scope.row.status!='1'" @click="handleDisable(1,scope.row)" class="butt-min success">启用</button>
            <button v-else @click="handleDisable(0,scope.row)" class="butt-min danger">禁用</button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import channelApi from "@/api/channel";
import bus from "@/api/busEvevt"
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: { }
})
export default class channelList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() status: any = '';//禁用状态
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Prop({}) tabVisible!: any;
  @Provide() searchMap:{
    type: any,
    name:any,
  }={
    type: '',
    name:''
  }
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/channelList'){
      this.tabShow=this.tabVisible;
    }
  }
  handleGoods(id){
    bus.$emit('mchId',id)
  }
  headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  handleOrder(id){
    bus.$emit('vendorId',id)
  }
  // 禁用启用
  handleDisable(i,row:any){
    if(i==1){
      this.status=1
    }else{
      this.status=0
    }
    channelApi.disabledChannel(row.id,this.status)
    .then((res: any) => {
      if(res.data.status){
        this.$message({
          message: '操作成功',
          type: "success"
        });
      }
      this.loadData()
    });
  }
  // 新增
  handleAdd(){
    this.tabShow=false
    this.$router.push({
      path:'/channelList/add'
    })
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.tabShow=false
  }
  // 删除
  handleDelete(index: number, row: any) {
    
  }
  created() {
    this.loadData();
    if(this.$route.path!='/channelList'){
      this.tabShow=false
    }
  }

  loadData() {
    channelApi.channelList(this.page,this.size,this.searchMap)
    .then((res: any) => {
        this.tableData = res.data.data;
        this.total = res.data.data.total;
        this.loading=false
    })
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
  this.page = 1;
  this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor{
  margin-right: 10px;
}
.el-button{
  margin-right: 10px;
}
.el-button+.el-button{
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 10px;
}
.el-button--color-defind{
  background-color:#33cabb !important;
  border: solid 1px #33cabb ;
}
</style>
